<template>
  <div>
    <div class="flag_warp">
      <div class="flag_left">{{swiperText}}</div>
      <div class="flag_center">
        <swipe
          :autoplay="5000"
          :show-indicators="false"
          vertical
          style="height:38px;"
          indicator-color="#fff"
        >
          <swipe-item v-for="(item, index) in flag_center" v-if='flag_center' @click="goDongtai(item)" :key="index">
            <div class="swiper_txt">·{{item.statusName}}</div>
            <!-- <div class="swiper_txt">·{{item.text}}</div> -->
          </swipe-item>
        </swipe>
        <!-- <div>·楼市再定调！这些价格房价酱油...</div>
        <div>·多地放松购放政策，2020年房价...</div>-->
      </div>
      <div class="flag_right" @click="openDialog">动态提醒</div>
    </div>
    <xzdialog  groupBuyingName='平台'  title="动态提醒" ref="child"></xzdialog>
  </div>
</template>
<script >
import { Swipe, SwipeItem } from "vant";
import xzdialog from "@/components/dialog";
import * as API from "@/http/common/api";
export default {
  name: "index",
  data() {
    return {
      flag_center: [ ]
    };
  },
  props: {
    swiperText: {
      //左侧 文字
      type: String,
      default: "今日头条"
    }
  },
  mounted() {
    this.findAllhousesStatus()
  },

  methods: {
    //打开弹窗
    openDialog() {
      this.$refs.child.hasOpen();
    },
    //
    // 今日头条
    findAllhousesStatus() {
      this.$http(API.findAllhousesStatus, {
        type: "GET",
        params: {}
      }).then(res => {
        this.flag_center =res.data.message 
      });
    },
    //去动态
    goDongtai(item){
      this.$router.push({ name: "Dongtai", params: { data: item} });
    }
  },
  components: {
    Swipe,
    SwipeItem,
    xzdialog
  }
};
</script>
<style scoped lang='less'>
.flag_warp {
  display: flex;
  box-sizing: border-box;
  padding: 0 42px 0 36px;
  height: 93px;
  background: #fff;
  align-items: center;
  margin-bottom: 8px;
  .flag_left {
    width: 183px;
    height: 64px;
    font-size: 40px;
    color: #fff;
    background: #51c20e;
    text-align: center;
    line-height: 64px;
    margin-right: 15px;
    font-size: 40px;
    border-radius: 4px;
  }
  .swiper_txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .flag_center {
    width: 342px;
    margin-right: 18px;
  }
  .flag_right {
    width: 220px;
    height: 43px;
    line-height: 43px;
    font-size: 24px;
    color: #fff;
    text-align: center;
    background: #51c20e;
    width: 110px;
    border-radius: 4px;
  }
}
</style>
